<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扫描二维码</title>
    <script src="js/vue.min.js"></script>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body width="100%">
    <div id="app" style="margin: auto;margin-top: 300px;margin-left: 40%;">
        <h3>扫码授权登陆</h3>
        <img :src="qrCodeUrl"/>
        <h3>{{showTip}}</h3>
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            qrCodeUrl: "",
            token: "",
            showTip: ""
        },
        created: function () {
            this.getToken();
            //生成二维码
            this.getQrCode();
            //与服务器进行连接
            this.connectWs();
        },
        methods: {
            getQrCode() {
                let _this = this;
                $.ajax({
                    url: 'http://210.22.22.150:3930/qrCode/generateQrCode',
                    type: "GET",
                    dataType: 'json',
                    async: false,
                    success: function (res) {
                        if (res.success) {
                            _this.qrCodeUrl = res.qrCodeUrl;
                        }
                    }
                });
            },
            getToken() {
                let _this = this;
                $.ajax({
                    url: 'http://210.22.22.150:3930/qrCode/generateJwt?mobile=18333333333',
                    type: "GET",
                    dataType: 'json',
                    async: false,
                    success: function (res) {
                        if (res.success) {
                            _this.token = res.token;
                        }
                    }
                });
            },
            connectWs() { //与服务器进行连接
                let _this = this;
                //地址+端点路径，构建websocket链接地址,注意，对应config配置里的addEndpoint
                let host = "http://210.22.22.150:3930/qrCode/ws";
                let socket = new SockJS(host+'?token='+ _this.token);
                stompClient = Stomp.over(socket);
                stompClient.connect({}, function(frame) {
                    console.log('Connected:' + frame);
                    //监听的路径以及回调
                    stompClient.subscribe('/user/queue/sendUser', function(response) {
                        let body = response.body;
                        _this.showTip = body;
                        console.log("msg|" + body)
                    });
                    //监听的路径以及回调
                    stompClient.subscribe('/user/queue/authRes', function(response) {
                        let res = JSON.parse(response.body);
                        _this.showTip = res.msg;
                        console.log("msg|" + response)
                        if(res.success) {
                            window.location.href = res.url;
                        }
                    });
                });
            }
        }
    })
</script>